<template>
	<view class="cust_detail">
		<view class="cust_item">
			<view class="cust_item_head">
				<view class="head_info">
					<image :src="BASE_IMG_URL+'fujian.png'" class="peopleimg" mode="scaleToFill"></image>
					<view>附件</view>
				</view>
			</view>
			<view class="item_doc">
				<view class="doc_item" v-for="(item,index) in fileList" :key="index" @click.stop="lookDetail(item)">
					<view class="iconfont icon--task"></view>
					<input type="text" :disabled="item.disabled" :focus="item.focus" :data-index="index"  v-model="item.name" @confirm="changeName" @blur="changeName" class="doc_name" />
					<view class="doc_size">{{item.size}}</view>
					<image :src="BASE_IMG_URL+'edit.png'" class="editimg" @click.stop="edit(index)" mode="scaleToFill"></image>
				</view>
			</view>
		</view>
		<view class="cust_item">
			<view class="cust_item_head">
				<view class="head_info">
					<image :src="BASE_IMG_URL+'followRecord.png'" class="peopleimg" mode="scaleToFill"></image>
					<view>操作记录</view>
				</view>
			</view>
			<view class="operation_record" v-if="opera_list.length != 0">
				<view class="record_item" v-for="(item,index) in opera_list" :key="index">
					<image :src="item.staff.img ? item.staff.img : BASE_IMG_URL+'headImg.png'" mode="scaleToFill"></image>
					<view class="record_info">
						<view class="info_top">
							<view>{{item.staff.name}}</view>
							<view class="record_time">
								{{item.createtime}}
							</view>
						</view>
						<view>{{item.content}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { netContactFileList, netOperationList, netEditFileName } from '@/api/kehu.js'
	import { BASE_IMG_URL } from '@/util/api.js'
	export default {
		props:{
			contactid:{
				type:Number,
				default:null
			}
		},
		data() {
			return {
				fileList:[],   //附件列表
				opera_list:[],   //操作记录
				BASE_IMG_URL:BASE_IMG_URL,
			}
		},
		created() {
			//附件 列表
			this.getFile()
			//操作记录
			this.getOperalist()
		},
		methods: {
			getFile() {
				let params = { contacts_id:this.contactid }
				netContactFileList(params).then(res=>{
					res.data.forEach(item=>{
						item.disabled = true
						item.focus = false
					})
					this.fileList = res.data
				})
			},
			getOperalist() {
				let params = {
					relation_type:2,
					relation_id: this.contactid
				}
				netOperationList(params).then(res=>{
					this.opera_list = res.data
				})
			},
			//点击 附件  查看
			lookDetail(item) {
				if(item.types.indexOf('image') != -1){
					uni.previewImage({
						urls: [ item.file_path ]
					})
				}else{
					uni.downloadFile({
						url: item.file_path,
						success:(res)=>{
							uni.openDocument({
								filePath:res.tempFilePath,
								success:(res)=>console.log('成功打开文档')
							})
						},
						fail:(err)=>{
							console.log(err,'shibai')
						}
					})
				}
			},
			//编辑
			edit(index) {
				console.log(index)
				let obj = this.fileList[index]
				obj.disabled = false
				obj.focus = true
				this.fileList[index] = obj
			},
			changeName(e) {
				console.log(e)
				let name = e.detail.value
				let index = e.currentTarget.dataset.index
				let params = {
					id: this.fileList[index].id,
					name
				}
				netEditFileName(params).then(res=>{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
					setTimeout(()=>{
						this.getFile()
					},2000)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.cust_detail {
		
		.cust_item {
			padding: 0 24rpx;
			background-color: #fff;
			margin-bottom: 20rpx;
			.cust_item_head {
				display: flex;
				justify-content: space-between;
				line-height: 100rpx;
				border-bottom: 1rpx solid #EAEAEA;
				.head_info {
					display: flex;
					align-items: center;
					.icon--task {
						margin-right: 10rpx;
					}
				}

				.head_new {
					display: flex;
					align-items: center;
					color: #1c9bfc;
					.icon-clock {
						margin-right: 10rpx;
					}
				}
			}
			.lxr_con_list{
				padding-bottom:20rpx;
				border-bottom:1rpx solid #C0C0C0;
				&:last-child{
					border-bottom:none;
				}
				.name{
					font-size:28rpx;
					color:#333333;
					margin-top:15rpx;
				}
				.info{
					font-size:24rpx;
					color:#999999;
					margin:10rpx 0;
				}
				.proce_li{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.pro_li_left{
						display: flex;
						justify-content: flex-start;
						align-items: center;
						.protext{
							font-size:24rpx;
							color:#999999;
						}
						.probox{
							width:120rpx;
							height:15rpx;
							border-radius: 8rpx;
							background:#C0C0C0;
							margin:0 15rpx;
							.proin{
								width:20%;
								height:15rpx;
								border-radius: 8rpx;
								background:#ff7800;
							}
						}
						.pronum{
							font-size:24rpx;
							color:#999999;
						}
					}
					.pro_li_right{
						color: #ec7f51;
						font-size: 28rpx;
						font-weight: 500;
					}
				}
				.con_status{
					font-size:24rpx;
					color:#03aa96;
					margin-top:10rpx;
				}
			}
			.cust_item_con {
				border-bottom: 1rpx solid #EAEAEA;
				padding:15rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.con_info {
					padding: 10rpx 0;
					:first-child {
						color: #060606;
						font-weight: 700;
						line-height: 50rpx;
						font-size: 28rpx;
					}
					:last-child {
						color: #469369;
						line-height: 50rpx;
					}
				}
				.con_money {
					color: #ec7f51;
					font-size: 28rpx;
					line-height: 150rpx;
					font-weight: 700;
				}
			}
			
			.item_doc {
				// padding: 30rpx 0;
				.doc_item {
					display: flex;
					align-items: center;
					background-color: #f7faff;
					line-height: 60rpx;
					margin-bottom: 20rpx;
					.icon--task {
						width: 50rpx;
						padding-left: 10rpx;
					}
					.doc_name {
						flex: 1;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.doc_size {
						width: 130rpx;
					}
					.editimg{
						width: 40rpx;
						height:40rpx;
					}
					.icon-clear {
						width: 50rpx;
					}
				}
			}
			
			.operation_record {
				padding: 40rpx 0rpx;
				.record_item {
					display: flex;
					justify-content: space-between;
					margin-bottom: 20rpx;
					padding-bottom:20rpx;
					border-bottom:1rpx solid #EAEAEA;
					margin-bottom:20rpx;
					&:last-child{
						border-bottom:none;
					}
					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						flex-shrink: 0;
					}
					.record_info {
						flex: 1;
						margin-left: 25rpx;
						line-height: 40rpx;
						font-size: 28rpx;
						.info_top{
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-bottom:10rpx;
						}
						.shenhetext{
							font-size:26rpx;
							color:#666;
							line-height: 34rpx;
						}
					}
					.record_line {
						position: absolute;
						top: -102rpx;
						left: -26rpx;
						height: 105rpx;
						border-left: 4rpx dotted #dedede;
					}
				}
			}
		}
	}
	.peopleimg{
		width:35rpx;
		height:35rpx;
		margin-right:15rpx;
	}
	.phoneimg{
		width:40rpx;
		height:60rpx;
		margin-right: 20rpx;
	}
	.con-name,.con-mobile{
		line-height: 50rpx;
	}
	.con-mobile{
		color:#999;
	}
</style>
